<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <title>Beehive</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <script th:src="@{/js/jquery-3.4.0.js}"></script>
    <script th:src="@{/layui/layui.js}"></script>
    <script th:src="@{/js/vue.js}"></script>
    <style>
        a {
            color: #51a0e3;
        }

        a:hover {
            color: #51a0e3;
        }
    </style>

</head>
<body style="background-color: rgb(242,245,248)">
<div style="margin: 10px auto 0; width: 770px; background-color: #fff; border-radius: 5px">
    <div >
        <div>
            <img th:src="@{/img/logo_lg.png}" style="margin: 10px 10px" width="50px" height="50px">
            <a th:href="@{/index.html}" style="text-decoration: none; margin-right: 20px;
                                                margin-top: 38px; float: right">首页</a>
        </div>
    </div>
    <div id="app" style="border-top: 1px solid #eeeeee; padding-bottom: 50px">
        <p style="color: #999999; margin: 10px 0 10px 30px; font-size: 13px">
            <span th:if="${feedback.name != null}">[[${feedback.name}]]</span>
            <span th:if="${feedback.name == null || feedback.name == ''}" th:text="|匿名网友|" style="color: #f38181"></span>
            在Beehive|蜂巢书屋的反馈：</p>
        <div style="color: #DB7C22;line-height: 2;font-size: 14px;padding: 5px 10px; margin: 0 30px 10px;
                    border-radius: 2px;background: none repeat scroll 0 0 #FFFCEF;">
            <p style="margin: 10px auto;">[[${feedback.content}]]</p>
        </div>
        <p style="color: #999999; margin: 0 0 10px 30px; font-size: 13px">您输入的信息将出现在邮件正文中：</p>
        <div style="color: #DB7C22;line-height: 2;font-size: 14px;padding: 5px 10px; margin: 0 30px 10px;
                    border-radius: 10px;opacity: 0.9; background: none repeat scroll 0 0 #FFFCEF;">
            <form class="layui-form">
                <div class="layui-form-item layui-form-text" style="margin-bottom: 20px; margin-top: 20px">
                    <label class="layui-form-label" style="padding-top: 0; padding-left: 0; margin-left: -16px">
                        <span style="color: red">*</span>回复内容
                    </label>
                    <div class="layui-input-block" style="margin-left: -70px">
                    <textarea name="content" placeholder="请输入要回复的内容……" class="layui-textarea"
                              style="width: 520px; max-height: 170px" v-model="replyContent" lay-verify="required"></textarea>
                    </div>
                    <span style="color: red;margin-left: 80px;" v-if="replyContent == ''">反馈内容不能为空</span>
                </div>
                <div style="margin: 16px 60px 16px 0; float: right; ">
                    <button type="button" class="layui-btn layui-btn-normal" v-on:click="addReply" lay-submit>提交</button>
                    <button type="button" class="layui-btn layui-btn-primary" v-on:click="remove">重置</button>
                </div>
            </form>
        </div>
    </div>

</div>

<script th:inline="javascript">

    // lay-submit和v-con绑定了两个事件，会同时触发
    //<![CDATA[
    let vm = new Vue({
        el: '#app',
        data: {
            replyContent: '',
        },
        methods: {
            addReply() {
                if (this.replyContent.length === 0) {
                    return ;
                }
                $.ajax({
                    url: '/admin/sendTempEmail',
                    type: 'post',
                    data: JSON.stringify({id: [[${feedback.id}]], email: [[${feedback.email}]],
                                        content: [[${feedback.content}]], replyContent: this.replyContent, status: 2}),
                    contentType: 'application/json;charset=utf-8',
                    success: function (result) {
                        console.log(true)
                        if (result) {
                            layer.alert('邮件已发送',{icon:1, shadeClose :true});
                        } else {
                            layer.alert('邮件发送失败',{icon:0, shadeClose :true});
                        }
                        setTimeout(function() {
                            window.parent.location.href = "/admin/feedbackList";
                        }, 2400);
                    },
                    error: function () {
                        layer.alert('BeeHive服务器开小差了',{icon:2, shadeClose :true});
                    }
                })
            },
            // 清空文本
            remove() {
                this.replyContent = "";
            }
        }
    })
    //]]>

    layui.use(['form', 'layer'], function () {
        // let form = layui.form;
    })

</script>

</body>
</html>